<template>
  <div
    class="h-[54px] w-[375px] mt-[26px] flex items-center justify-between px-11 absolute bottom-0 left-0 right-0 bg-white"
    :class="bgColor ? 'bg-white rounded-tl-xl rounded-tr-xl' : ''"
  >
    <span class="flex flex-col items-center">
      <img :src="tabbarIcons.home_selected" alt="" v-if="active === 'home'" class="w-6 h-6 mb-[2px]" />
      <img :src="tabbarIcons.home" alt="" v-else class="w-6 h-6 mb-[2px]" />
      <label class="text-[10px]" :class="active === 'home' ? 'text-[#ff613f]' : 'text-[#b1b1b1]'">首页</label>
    </span>
    <span class="flex flex-col items-center">
      <img :src="tabbarIcons.member_selected" alt="" v-if="active === 'member'" class="w-6 h-6 mb-[2px]" />
      <img :src="tabbarIcons.member" alt="" v-else class="w-6 h-6 mb-[2px]" />
      <label class="text-[10px]" :class="active === 'member' ? 'text-[#ff613f]' : 'text-[#b1b1b1]'">会员</label>
    </span>
    <span class="flex flex-col items-center">
      <img :src="tabbarIcons.game_selected" alt="" v-if="active === 'game'" class="w-6 h-6 mb-[2px]" />
      <img :src="tabbarIcons.game" alt="" v-else class="w-6 h-6 mb-[2px]" />
      <label class="text-[10px]" :class="active === 'game' ? 'text-[#ff613f]' : 'text-[#b1b1b1]'">游戏</label>
    </span>
    <span class="flex flex-col items-center">
      <img :src="tabbarIcons.mine_selected" alt="" v-if="active === 'mine'" class="w-6 h-6 mb-[2px]" />
      <img :src="tabbarIcons.mine" alt="" v-else class="w-6 h-6 mb-[2px]" />
      <label class="text-[10px]" :class="active === 'mine' ? 'text-[#ff613f]' : 'text-[#b1b1b1]'">我的</label>
    </span>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import tabbarIcons from '../../../../views/src/assets/navigation'

const props = withDefaults(defineProps<{ active: string; bgColor?: boolean }>(), { active: 'home' })
</script>

<style scoped lang="less"></style>
